@import tags.navbar

@main("Monitrix - Administration") {
  @navbar("/admin")
}{
  <style>
    .progress {
      margin-top:5px;
      height:8px;
      width:180px;
      margin-bottom:0px;
    }
    
    .circle {
      display:inline-block;
      border-radius:50%;
      width:12px;
      height:12px;
    }
    
    .circle-large {
      display:inline-block;
      position:relative;
      top:4px;
      border-radius:50%;
      width:18px;
      height:18px;
      margin-left:4px;
    }
    
    .monitrix-log-ingest-status-trafficlight {
      text-align:center !important;
      width:30px;
    }
    
    .monitrix-log-ingest-status-progress  {
      text-align:center !important;
      width:220px;
    }
  </style>
  
  
  @if(flash.get("error") != null) {
    <div class="alert alert-block alert-error">
      <h4 class="alert-heading">Error.</h4> @flash.get("error")
    </div>  
  }
  
  <div class="pull-left">
    <a class="btn btn-warning btn-large" href="@routes.About.index()">About</a>
  </div>
  <div style="text-align:right;margin-bottom:20px;" class="pull-right">
    <p>
      Database Integrity
      @defining(uk.bl.monitrix.Global.getBackend) { backend =>
        @if(backend.getIngestSchedule.getLinesIngested == backend.getCrawlLog.countEntries) {
          <span class="circle-large" style="background-color:#080;"></span>
        } else {
          <span class="circle-large" style="background-color:#d00;"></span>
        }
      }
    </p>
    
    @defining(uk.bl.monitrix.Global.getIngestWatcher) { watcher =>
      <p>
        Ingest Watcher Health
        @if(watcher.isAlive) {
          <span class="circle-large" style="background-color:#080;"></span>
        } else {
          <span class="circle-large" style="background-color:#d00;"></span>
        }      
      </p>
      
      <p>
        Ingest Watch Loop Running
        @if(watcher.isRunning) {
          <span class="circle-large" style="background-color:#080;"></span>
        } else {
          <span class="circle-large" style="background-color:#d00;"></span>
        }     
      </p>
    }
  </div> 
  
  <h2 style="clear:both">Monitored Heritrix Logs</h2>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Log ID</th>
        <th>Crawler ID &amp; Log Path</th>
        <th>Lines Ingested</th>
        <th class="monitrix-log-ingest-status-trafficlight">Status</th>
        <th>WATCHING</th>
        <th></th>
        <th class="monitrix-log-ingest-status-progress"></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
    @defining(uk.bl.monitrix.Global.getBackend.getIngestSchedule.getLogs) { logs =>
      @for(log <- logs) {
        <tr class="monitrix-log-ingest-status">
          <td class="monitrix-log-ingest-status-logid">@log.getId</td>
          <td class="monitrix-log-ingest-status-logpath"><b>@log.getCrawlerId</b><br/>(<abbr title="@log.getPath">log file path</abbr>)</td>
          <td class="monitrix-log-ingest-status-lines-ingested"></td>
          <td class="monitrix-log-ingest-status-trafficlight"></td>
          <td>
            @if(log.isMonitored) {
              <i class="icon-eye-open"></i>
            }
          </td>
          <td class="monitrix-log-ingest-status-message"></td>
          <td class="monitrix-log-ingest-status-progress">
            <div class="progress"><div class="bar bar-warning" style="width:0%"></div></div>
          </td>
          <td>
            <button class="btn btn-mini" onclick="javascript:toggleWatch('@log.getId')">&nbsp;<i class="icon-eye-close"></i>&nbsp;</button>
          </td>
        </tr>
      }
    }
    </tbody>
  </table>
  
  <form class="form-inline" action="@routes.Admin.addLog()" method="POST">
    <button type="submit" class="btn btn-small"><i class="icon-file"></i> Add Log</button>
    <input type="text" name="crawler_id" style="font-size:12px;height:16px;" placeholder="Enter Crawler ID..." autocomplete="off" value="dummy">
    <input type="text" name="path" style="font-size:12px;height:16px;" placeholder="Enter File Path..." autocomplete="off" value="/home/simonr/Workspaces/ukwa/monitrix/monitrix-loader/src/test/resources/sample-log-1E5.log">
  </form>
  
  <script>
    function toggleWatch(id) {
      window.location.href = '@routes.Admin.toggleWatch?id=' + encodeURIComponent(id);
    }
    
    function pollStatusInfo() {
      $.getJSON('/api/admin/logs/status', function(data) {
    	var table = $('.monitrix-log-ingest-status');
    	$.each(data, function(idx, log_status) {
    	  $.each(table, function(idx, table_row) {
    	    if ($('.monitrix-log-ingest-status-logid', table_row).first().html() == log_status.id) {
    	    	
    	      // Update no. of lines ingested
    	      $('.monitrix-log-ingest-status-lines-ingested', table_row).first().html(log_status.lines_ingested);
    	      
    	      // Update traffic light
    	      $('.monitrix-log-ingest-status-trafficlight', table_row).first().html(getTrafficLight(log_status.status.phase));
    	      
    	      // Update status message
    	      $('.monitrix-log-ingest-status-message', table_row).first().html(getMessage(log_status.status.phase));
    	      
    	      // Update progress bar
    	      var progress = $('.progress', table_row).first();
    	      var bar = progress.children('.bar').first();    	      
    	      if (log_status.status.phase == 'CATCHING_UP') {
    	    	progress.css('display', 'block');
    	        bar.css('width', log_status.status.progress + '%');
    	      } else {
    	    	progress.css('display', 'none');
    	      }
    	    }
    	  });
    	});
    	
    	window.setTimeout(pollStatusInfo, 1000);
      })
      .error(function() { window.setTimeout(pollStatusInfo, 5000); });
    }
    
    function getTrafficLight(phase) {
    	if (phase == 'PENDING')
    		return '<span class="circle" style="background-color:#888;"></span>';
  
    	if (phase == 'CATCHING_UP')
    		return '<span class="circle" style="background-color:#ff7d40;"></span>';
    		
    	if (phase == 'IDLE')
    		return '<span class="circle" style="background-color:#080;"></span>';
    		
    	if (phase == 'SYNCHRONIZING')
    		return '<span class="circle" style="background-color:#ff7d40;"></span>';

        if (phase == 'UNAVAILABLE')
    		return '<span class="circle" style="background-color:#ff0000;"></span>';

    		
    	return '';
    }
    
    
    function getMessage(phase) {
    	if (phase == 'PENDING')
    		return 'PENDING';
    	
    	if (phase == 'CATCHING_UP')
    		return 'CATCHING UP';
    		
    	if (phase == 'IDLE')
    		return 'IDLE';
    		
    	if (phase == 'SYNCHRONIZING')
    		return 'SYNCHRONIZING';

    	if(phase == 'UNAVAILABLE')
    	    return 'UNAVAILABLE';

    	return '';
    }
    pollStatusInfo();
  </script>
}